<template>
  <div>
    <el-input v-model="emoji">
      <template #append>
        <el-popover placement="left" :width="450" trigger="click">
          <template #reference> 选择 </template>
          <h3 text-center pb4>请选择一个emoji图标</h3>
          <EmojiPicker class="dk-emoji w-full h-400px" style="box-shadow: none" :native="true" @select="onSelectEmoji" />
        </el-popover>
      </template>
    </el-input>
    <div v-if="emoji" class="text-48px bg-white size-80px flex items-center justify-center mt1" style="border: 1px solid #ccc">
      {{ emoji }}
    </div>
  </div>
</template>

<script setup lang="ts">
import EmojiPicker from 'vue3-emoji-picker'
import 'vue3-emoji-picker/css'
import { ref } from 'vue'

defineOptions({
  name: 'DkEmojiPickerInput'
})

const props = defineProps({
  modelValue: {
    default: '',
    type: String
  }
})

const emit = defineEmits(['update:modelValue'])
const emoji = ref(props.modelValue)
const onSelectEmoji = (e) => {
  emoji.value = e.i
  emit('update:modelValue', e.i)
}
</script>

<style>
.dk-emoji {
  button {
    font-size: 30px !important;
  }
}
</style>
